<template>
  <!-- 系统设置 - 权限设置弹窗组件 -->
  <el-dialog
    title="权限设置"
    width="600px"
    :model-value="visible"
    @open="handleOpen"
    @close="handleClose"
  >
    <!-- 页面权限设置区域 -->
    <el-card>
      <!-- 卡片标题 -->
      <template #header>
        <div class="card-header">
          <span>页面权限</span>
        </div>
      </template>

      <!-- 权限树形组件 -->
      <el-tree
        ref="treeRef"
        style="max-width: 600px"
        show-checkbox
        :data="treeData"
        node-key="url"
      />
    </el-card>

    <!-- 按钮权限设置区域 -->
    <el-card class="mt">
      <!-- 卡片标题 -->
      <template #header>
        <div class="card-header">
          <span>按钮权限</span>
        </div>
      </template>

      <!-- 按钮权限复选框组 -->
      <el-checkbox-group v-model="initbtnAuth">
        <el-checkbox label="全部" value="all" />
        <el-checkbox label="添加" value="add" />
        <el-checkbox label="编辑" value="edit" />
        <el-checkbox label="删除" value="delete" />
      </el-checkbox-group>
    </el-card>

    <!-- 弹窗底部操作按钮 -->
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose"> 取 消 </el-button>
        <el-button type="primary" @click="handleConfirm"> 确 认 </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage } from "element-plus";
import { useUserStore } from "@/store/auth";
import { trtansformMenu } from "@/utils/tool";

// ================= 组件属性定义 =======================

/**
 * 组件属性定义
 */
const props = defineProps({
  /**
   * 控制弹窗显示状态
   */
  visible: {
    type: Boolean,
    required: true,
  },

  /**
   * 当前用户已选中的权限URL列表
   */
  checkedKeys: {
    type: Array as () => string[],
    required: true,
  },

  /**
   * 当前用户的按钮权限列表
   */
  btnAuth: {
    type: Array as () => string[],
    required: true,
  },

  /**
   * 当前操作用户账号
   */
  accountNo: {
    type: String,
    required: true,
  },
});

// ================= 权限数据管理逻辑 =======================

/**
 * 用户状态管理Store实例
 */
const userStore = useUserStore();

/**
 * 从Store中获取菜单权限数据
 */
const { menu } = userStore;

/**
 * 树形权限数据 - 通过工具函数转换菜单数据
 */
const treeData = ref<any[]>(trtansformMenu(menu));

// ================= 组件状态和引用 =======================

/**
 * 树形组件实例引用
 */
const treeRef = ref();

/**
 * 按钮权限状态
 */
const initbtnAuth = ref<string[]>([]);

// ================= 事件定义 =======================

/**
 * 组件事件定义
 */
const emit = defineEmits(["close", "reload"]);

// ================= 弹窗生命周期处理 =======================

/**
 * 弹窗打开事件处理
 * 初始化权限选中状态
 */
const handleOpen = () => {
  // 设置树形组件的选中节点
  treeRef.value.setCheckedKeys(props.checkedKeys);
  // 初始化按钮权限选中状态
  initbtnAuth.value = [...props.btnAuth];
};

/**
 * 弹窗关闭事件处理
 * 通知父组件关闭弹窗
 */
const handleClose = () => {
  emit("close");
};

// ================= 权限提交逻辑 =======================

/**
 * 确认权限设置
 * 收集权限数据并提交
 */
const handleConfirm = () => {
  // 获取选中的权限Key（只包含叶子节点）
  const checkedKeys = treeRef.value.getCheckedKeys(true);

  // 获取按钮权限设置
  const btnAuth = initbtnAuth.value;

  // 获取当前操作用户账号
  const accountNo = props.accountNo;

  // 调试日志 - 在实际项目中可移除
  console.log("提交的权限数据:", {
    accountNo,
    checkedKeys,
    btnAuth,
  });

  // 显示成功消息
  ElMessage({
    message: "权限设置成功",
    type: "success",
  });

  /**
   * 实际项目中的API调用示例
   *
   * await api.submitPermissions({
   *   accountNo,
   *   checkedKeys,
   *   btnAuth,
   * });
   */

  // 通知父组件重新加载数据
  emit("reload");

  // 关闭弹窗
  emit("close");
};
</script>

<style scoped>
/* 权限设置弹窗样式 */
/* 当前使用Element UI默认样式，可根据需要添加自定义样式 */

.card-header {
  font-weight: bold;
  font-size: 16px;
}

.dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
</style>
